<p>模态框允许以对话框的形式弹出，有半透明的页面遮罩层，并在显示和隐藏时支持动画。</p>
<h3>实例</h3>
<h4>静态实例</h4>
<div class="example modal modal-dialog modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden=
    "true">×</span><span class="sr-only">关闭</span></button>
    <h4 class="modal-title">标题</h4>
  </div>
  <div class="modal-body">
    <p>主题内容...</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss=
    "modal">关闭</button> <button type="button" class=
    "btn btn-primary">保存</button>
  </div>
</div>
<pre class="prettyprint">
<code>&lt;div class=&quot;modal fade&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
  &lt;div class=&quot;modal-content&quot;&gt;
    &lt;div class=&quot;modal-header&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;关闭&lt;/span&gt;&lt;/button&gt;
      &lt;h4 class=&quot;modal-title&quot;&gt;标题&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modal-body&quot;&gt;
      &lt;p&gt;主题内容...&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modal-footer&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;关闭&lt;/button&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;保存&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code>
</pre>
<h4>动态实例</h4>
<p>点击按钮通过Javascript来启动一个模态框。</p>
<div class="example">
  <button type="button" class="btn btn-lg btn-primary" data-toggle="modal"
  data-target="#myModal">启动模态框</button>
</div>
<pre class="prettyprint">
<code>&lt;!-- 模态框触发按钮 --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-lg btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;启动模态框&lt;/button&gt;
&lt;!-- 模态框HTML --&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot;&gt;
  &lt;div class=&quot;modal-dialog&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>
</pre>
<h4>决定模态框位置</h4>
<p>默认情况下模态框会根据自身内容高度展示在页面中心稍靠上方的位置。通过一些参数可以重新决定模态框的展现位置（具体参数参考“如何使用”章节）。</p>
<div class="example">
  <button type="button" class="btn btn-primary" data-position="fit"
  data-toggle="modal" data-target="#myModal">默认位置</button> <button type=
  "button" class="btn btn-primary" data-position="center" data-toggle="modal"
  data-target="#myModal">窗口中间</button> <button type="button" class=
  "btn btn-primary" data-position="" data-toggle="modal" data-target=
  "#myModal">靠近上方</button> <button type="button" class="btn btn-primary"
  data-position="100px" data-toggle="modal" data-target=
  "#myModal">距离上方100px</button>
</div>
<pre class="prettyprint">
<code>&lt;button type=&quot;button&quot; class=&quot;btn&quot; data-position=&quot;fit&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;默认位置&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot; data-position=&quot;center&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;窗口中间&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot; data-position=&quot;&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;靠近上方&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot; data-position=&quot;100px&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;距离上方100px&lt;/button&gt;</code>
</pre>
<h4>更改模态框的大小</h4>
<p>
模态框的默认宽度为<code>600px</code>，你可以通过为<code>.modal-dialog</code>应用CSS样式来更改模态框的宽度。在ZUI中也提供了额外两种预设的宽度，通过为<code>.modal-dialog</code>添加CSS类名来调整实现：</p>
<ul>
  <li>大模态框：添加<code>.modal-lg</code>CSS类名，宽度为<code>900px</code>；</li>
  <li>小模态框：添加<code>.modal-sm</code>CSS类名，宽度为<code>300px</code>。</li>
</ul>
<div class="example">
  <button type="button" class="btn btn-primary" data-toggle="modal"
  data-target="#myLgModal">大模态框</button> <button type="button" class=
  "btn btn-primary" data-toggle="modal" data-target="#mySmModal">小模态框</button>
</div>
<pre class="prettyprint">
<code>&lt;!-- 大模态框 --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myLgModal&quot;&gt;大模态框&lt;/button&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;myLgModal&quot;&gt;
  &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- 小模态框 --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#mySmModal&quot;&gt;小模态框&lt;/button&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;mySmModal&quot;&gt;
  &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>
</pre>
<h4>禁用动画效果</h4>
<p>
模态框在弹出或隐藏时会伴随动画效果（淡入淡出效果），如果不需要，只需要移除<code>.modal</code>标签上的<code>.fade</code>类即可。</p>
<div class="example">
  <button type="button" class="btn btn-primary" data-toggle="modal"
  data-target="#fastModal">立即展现</button>
</div>
<pre class="prettyprint">
<code>&lt;!-- 禁用动画效果的模态框 --&gt;
&lt;div class=&quot;modal&quot;&gt;
...
&lt;/div&gt;
</code>
</pre>
<h4>关闭模态框</h4>
<p>
在静态模态框HTML中增加一个按钮并添加data属性<code>data-dismiss=&quot;modal&quot;</code>，这样当点击该按钮时会关闭此对话框。你可以将该属性添加至模态框内的任何元素。</p>
<pre class="prettyprint">
<code>&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;关闭&lt;/span&gt;&lt;/button&gt;</code>
</pre>
<h3>如何使用</h3>
<h4>使用data属性</h4>
<p>
一般情况下不需要手动调用Javascript来使用模态框，只需要在触发模态框的按钮或链接上增加两个额外的data属性即可：<code>data-toggle=&quot;modal&quot;</code>和<code>data-target=&quot;#myModal&quot;</code>。</p>
<p>
其中<code>data-toggle</code>属性声明该按钮或链接点击后会显示或隐藏模态框。<code>data-target</code>属性指明静态模态框的ID属性。</p>
<p>
如果使用<code>&lt;a&gt;</code>触发模态框，可以直接将静态模块框的ID写在<code>href</code>属性内，<code>data-target</code>属性则可以忽略。</p>
<p>使用data属性也可以来为对话框提供其他参数。</p>
<pre class="prettyprint">
<code>&lt;!-- 使用按钮 --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;启动模态框&lt;/button&gt;
&lt;!-- 使用超链接 --&gt;
&lt;a data-toggle=&quot;modal&quot; href=&quot;#myModal&quot;&gt;启动模态框&lt;/a&gt;</code>
</pre>
<h4>手动调用Javascript</h4>
<p>不使用按钮或链接来触发模态框也可以使用Javascript来手动触发。</p>
<pre class="prettyprint">
<code>$(&#39;#myModal&#39;).modal(options)</code>
</pre>
<h4>参数</h4>
<p>参数既可以在手动调用的时候指定，也可以在静态模态框或者触发器上使用data属性来指定。</p>
<p>可用的参数如下：</p>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>参数</th>
      <th style="width: 80px">名称</th>
      <th style="width: 300px">可选值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>name</code></td>
      <td>模态框名称</td>
      <td>字符串，默认为<code>&#39;triggerModal&#39;</code></td>
      <td>此参数会指定模态框DOM的id属性和iframe的id属性和name属性。</td>
    </tr>
    <tr>
      <td><code>backdrop</code></td>
      <td>背景遮罩</td>
      <td>
        <ul>
          <li><code>&#39;static&#39;</code></li>
          <li><code>true</code>（默认）</li>
          <li><code>false</code></li>
        </ul>
      </td>
      <td>
      使用布尔值来启用或禁用背景遮罩，如果指定为<code>&#39;static&#39;</code>则会启动背景遮罩，但点击背景遮罩时不会触发关闭模态框的过程。</td>
    </tr>
    <tr>
      <td><code>keyboard</code></td>
      <td>按键</td>
      <td>
        <ul>
          <li><code>true</code>（默认）</li>
          <li><code>false</code></li>
        </ul>
      </td>
      <td>当为<code>ture</code>时，按下<code>esc</code>键会关闭模态框。</td>
    </tr>
    <tr>
      <td><code>show</code></td>
      <td>立即显示</td>
      <td>
        <ul>
          <li><code>true</code>（默认）</li>
          <li><code>false</code></li>
        </ul>
      </td>
      <td>是否在模态框初始化之后立即显示出来。</td>
    </tr>
    <tr>
      <td><code>position</code></td>
      <td>显示位置</td>
      <td>
        <ul>
          <li><code>&#39;fit&#39;</code>（默认），最佳位置；</li>
          <li><code>&#39;center&#39;</code>，显示在窗口中间；</li>
          <li><code>&#39;&#39;</code>，显示在最顶部；</li>
          <li><code>200</code>，数字用来指定距离顶部的像素；</li>
          <li>CSS支持的所有表示位置的值，用来指定距离顶部的偏移；</li>
        </ul>
      </td>
      <td>默认位置是在窗口中部稍偏上的地方。</td>
    </tr>
  </tbody>
</table>
<h4>方法</h4>
<h5>.modal(options)</h5>
<p>使用参数对象来初始化模态框。</p>
<pre class="prettyprint">
<code>$(&#39;#myModal&#39;).modal(
{
    keyboard : false,
    show     : true
})</code>
</pre>
<h5>.modal(&#39;toggle&#39;, position)</h5>
<p>手动显示或隐藏模态框。<code>position</code>参数为可选的，用来指定显示的位置。</p>
<pre class="prettyprint">
<code>$(&#39;#myModal&#39;).modal(&#39;toggle&#39;, &#39;center&#39;)</code>
</pre>
<h5>.modal(&#39;show&#39;, position)</h5>
<p>手动显示模态框。<code>position</code>参数为可选的，用来指定显示的位置。</p>
<pre class="prettyprint">
<code>$(&#39;#myModal&#39;).modal(&#39;show&#39;, &#39;fit&#39;)</code>
</pre>
<h5>.modal(&#39;hide&#39;, position)</h5>
<p>手动隐藏模态框。<code>position</code>参数为可选的，用来指定显示的位置。</p>
<pre class="prettyprint">
<code>$(&#39;#myModal&#39;).modal(&#39;hide&#39;, &#39;fit&#39;)</code>
</pre>
<h5>.modal(&#39;ajustPosition&#39;, position)</h5>
<p>手动重新调整模态框显示位置。<code>position</code>参数为可选的，用来指定显示的位置。</p>
<pre class="prettyprint">
<code>$(&#39;#myModal&#39;).modal(&#39;ajustPosition&#39;, &#39;fit&#39;)</code>
</pre>
<h4>事件</h4>
<p>模态框提供了一系列事件用于监听模态框运行状态，便于在合适的时机运行你自己的代码。</p>
<table class="table table-bordered">
  <thead>
    <tr>
      <th style="width: 80px;">事件</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>show.zui.modal</code></td>
      <td>当<code>show</code>方法被调用时，此事件将被立即触发。</td>
    </tr>
    <tr>
      <td><code>shown.zui.modal</code></td>
      <td>当模态对话框呈现到用户面前时（会等待过渡效果执行结束）此事件被触发。</td>
    </tr>
    <tr>
      <td><code>hide.zui.modal</code></td>
      <td>当<code>hide</code>方法被调用时，此事件将被立即触发。</td>
    </tr>
    <tr>
      <td><code>hidden.zui.modal</code></td>
      <td>当模态对话框被隐藏（而且过渡效果执行完毕）之后，此事件将被触发。</td>
    </tr>
    <tr>
      <td><code>escaping.zui.modal</code></td>
      <td>
      当用户按下<code>esc</code>键来关闭对话框之前会调用此方法，如果在事件回调函数中返回<code>false</code>，则会终止对话框关闭过程。</td>
    </tr>
  </tbody>
</table>
<p>监听事件使用jQuery的on方法：</p>
<pre class="prettyprint">
<code>$(&#39;#myModal&#39;).on(&#39;shown.zui.modal&#39;, function()
{
  alert(&#39;对话框已显示。&#39;);
})</code>
</pre>
<h4>使用要点</h4>
<ul>
  <li>不能在一个模态框上重叠另一个模态框，也不支持在遮罩层同时显示两个以上的模态框；</li>
  <li>
  静态模态框的HTML代码应该放在文档最高层级内，作为<code>&lt;body&gt;</code>的直接子元素，以避免与文档中的其他组件冲突；</li>
  <li>模态框继承自Bootstrap模态框(v3.2)，包含其所有功能和接口。参考：<a target="_blank" href=
  "http://getbootstrap.com/javascript/#modals">英</a>，<a target="_blank" href=
  "http://v3.bootcss.com/javascript/#modals">中</a>。
  </li>
</ul>
